<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>
		
		<!-- 注册卡片 -->
		<view class="register-card">
			<!-- 标题区域 -->
			<view class="header">
				<view class="icon-wrapper">
					<text class="icon">✨</text>
				</view>
				<text class="title">创建账号</text>
				<text class="subtitle">开始您的购物之旅</text>
			</view>
			
			<!-- 表单区域 -->
			<view class="form">
				<view class="input-group">
					<view class="input-icon">👤</view>
					<input v-model="userName" class="input" placeholder="请输入用户名" placeholder-class="placeholder"></input>
				</view>
				
				<view class="input-group">
					<view class="input-icon">🔒</view>
					<input v-model="firstPassword" :password="!showFirstPassword" class="input" placeholder="请输入密码" placeholder-class="placeholder"></input>
					<view class="eye-icon" @click="toggleFirstPasswordVisibility">
						<text>{{ showFirstPassword ? '👁️' : '👁️‍🗨️' }}</text>
					</view>
				</view>
				
				<view class="input-group">
					<view class="input-icon">🔑</view>
					<input v-model="secondPassword" :password="!showSecondPassword" class="input" placeholder="请再次输入密码" placeholder-class="placeholder"></input>
					<view class="eye-icon" @click="toggleSecondPasswordVisibility">
						<text>{{ showSecondPassword ? '👁️' : '👁️‍🗨️' }}</text>
					</view>
				</view>
				
				<!-- 密码提示 -->
				<view class="tips">
					<text class="tip-icon">💡</text>
					<text class="tip-text">密码长度至少6位，用户名至少2位</text>
				</view>
				
				<button @click="onRegisterButtonClicked()" class="button primary" :disabled="loading">
					<text class="button-text">{{ loading ? '注册中...' : '立即注册' }}</text>
				</button>
				
				<view class="divider">
					<view class="divider-line"></view>
					<text class="divider-text">已有账号？</text>
					<view class="divider-line"></view>
				</view>
				
				<button @click="onBackButtonClicked()" class="button secondary">
					<text class="button-text">返回登录</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	let tag = 'register';
	export default {
		data() {
			return {
				//用户名
				userName: "",
				//第一次输入的密码
				firstPassword: "",
				//第二次输入的密码
				secondPassword: "",
				// 加载状态
				loading: false,
				// 第一个密码显示状态
				showFirstPassword: false,
				// 第二个密码显示状态
				showSecondPassword: false
			}
		},
		
		onLoad() {
			this.$log.info(tag, "onLoad");
		},
		
		methods: {
			// 切换第一个密码显示/隐藏
			toggleFirstPasswordVisibility() {
				this.showFirstPassword = !this.showFirstPassword;
				this.$log.info(tag, `第一个密码显示状态: ${this.showFirstPassword}`);
			},
			
			// 切换第二个密码显示/隐藏
			toggleSecondPasswordVisibility() {
				this.showSecondPassword = !this.showSecondPassword;
				this.$log.info(tag, `第二个密码显示状态: ${this.showSecondPassword}`);
			},
			
			onBackButtonClicked() {
				this.$log.info(tag, "onBackButtonClicked");
				uni.navigateBack();
			},
			
			onRegisterButtonClicked() {
				this.$log.info(tag, "onRegisterButtonClicked");
				
				// 表单验证
				if (!this.userName.trim()) {
					this.$log.error(tag, "用户名为空");
					uni.showToast({
						icon: 'none',
						title: "请输入用户名",
						duration: 1500
					});
					return;
				}
				
				if (!this.firstPassword.trim()) {
					this.$log.error(tag, "密码为空");
					uni.showToast({
						icon: 'none',
						title: "请输入密码",
						duration: 1500
					});
					return;
				}
				
				if (!this.secondPassword.trim()) {
					this.$log.error(tag, "确认密码为空");
					uni.showToast({
						icon: 'none',
						title: "请再次输入密码",
						duration: 1500
					});
					return;
				}
				
				// 用户名长度检查
				if (this.userName.length < 2) {
					this.$log.error(tag, "用户名长度不合法");
					uni.showToast({
						icon: 'none',
						title: "用户名长度应在2位之间",
						duration: 1500
					});
					return;
				}
				
				// 密码长度检查
				if (this.firstPassword.length < 6) {
					this.$log.error(tag, "密码长度不足6位");
					uni.showToast({
						icon: 'none',
						title: "密码长度至少6位",
						duration: 1500
					});
					return;
				}
				
				//检查密码是否一致
				if (this.firstPassword !== this.secondPassword) {
					this.$log.error(tag, "两次输入的密码不一致");
					uni.showToast({
						icon: 'none',
						title: "两次输入的密码不一致",
						duration: 1500
					});
					return;
				}
				
				// 开始注册流程
				this.getCode(this.userName, this.firstPassword);
			},
			
			getCode(userName, password) {
				this.$log.info(tag, "getCode");
				this.loading = true;
				
				try {
					uni.request({
						url: `${this.$constant.BASE_URL}/api/code`,
						method: 'GET',
						data: {
							password: password,
							username: userName
						},
						success: (res) => {
							this.$log.info(tag, "获取验证码成功");
							this.$log.info(tag, JSON.stringify(res.data));
							
							if (res.data && res.data.valid_code) {
								this.$log.info(tag, "验证码获取成功，开始注册");
								this.register(userName, password, res.data.valid_code);
							} else {
								this.$log.error(tag, "验证码获取失败:", res.data);
								uni.showToast({
									icon: 'none',
									title: res.data.msg || "验证码获取失败",
									duration: 1500
								});
								this.loading = false;
							}
						},
						fail: (err) => {
							this.$log.error(tag, "获取验证码请求失败:", err.errMsg);
							uni.showToast({
								icon: 'none',
								title: "网络请求失败，请检查网络连接",
								duration: 1500
							});
							this.loading = false;
						}
					});
				} catch (e) {
					this.$log.error(tag, "获取验证码异常:", e);
					uni.showToast({
						icon: 'none',
						title: "系统异常，请稍后重试",
						duration: 1500
					});
					this.loading = false;
				}
			},
			
			register(userName, password, valid_code) {
				this.$log.info(tag, "register");
				try {
					uni.request({
						url: `${this.$constant.BASE_URL}/api/register`,
						method: 'POST',
						header: {
							'content-type': 'application/json'
						},
						data: {
							password: password,
							username: userName,
							code: valid_code
						},
						success: (res) => {
							this.$log.info(tag, "注册请求成功");
							this.$log.info(tag, JSON.stringify(res.data));
							
							if (res.data.code == 200) {
								this.$log.info(tag, `${userName}注册成功`);
								uni.showToast({
									icon: 'success',
									title: res.data.msg || "注册成功",
									duration: 1500
								});
								
								// 延迟返回登录页
								setTimeout(() => {
									this.$log.info(tag, "注册成功，返回登录页");
									uni.navigateBack();
								}, 1500);
							} else {
								this.$log.error(tag, `${userName}注册失败: ${res.data.msg || '未知错误'}`);
								uni.showToast({
									icon: 'none',
									title: res.data.msg || "注册失败",
									duration: 1500
								});
							}
						},
						fail: (err) => {
							this.$log.error(tag, "注册请求失败:", err.errMsg);
							uni.showToast({
								icon: 'none',
								title: "网络请求失败，请检查网络连接",
								duration: 1500
							});
						},
						complete: () => {
							// 无论成功失败，都关闭加载状态
							this.loading = false;
						}
					});
				} catch (e) {
					this.$log.error(tag, "注册异常:", e);
					uni.showToast({
						icon: 'none',
						title: "系统异常，请稍后重试",
						duration: 1500
					});
					this.loading = false;
				}
			}
		}
	}
</script>

<style scoped>
	/* 容器 - 渐变背景 */
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		position: relative;
		overflow: hidden;
	}
	
	/* 背景装饰圆圈 */
	.bg-decoration {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		pointer-events: none;
	}
	
	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
		animation: float 6s ease-in-out infinite;
	}
	
	.circle-1 {
		width: 350rpx;
		height: 350rpx;
		top: -120rpx;
		right: -120rpx;
		animation-delay: 0s;
	}
	
	.circle-2 {
		width: 250rpx;
		height: 250rpx;
		bottom: -80rpx;
		left: -80rpx;
		animation-delay: 2s;
	}
	
	.circle-3 {
		width: 180rpx;
		height: 180rpx;
		top: 40%;
		left: 5%;
		animation-delay: 4s;
	}
	
	@keyframes float {
		0%, 100% {
			transform: translateY(0) rotate(0deg) scale(1);
			opacity: 0.3;
		}
		50% {
			transform: translateY(-40rpx) rotate(180deg) scale(1.15);
			opacity: 0.6;
		}
	}
	
	/* 注册卡片 */
	.register-card {
		width: 100%;
		max-width: 600rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 40rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(10px);
		position: relative;
		z-index: 1;
	}
	
	/* 标题区域 */
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;
	}
	
	.icon-wrapper {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(245, 87, 108, 0.4);
	}
	
	.icon {
		font-size: 60rpx;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #2d3748;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #718096;
	}
	
	/* 表单区域 */
	.form {
		width: 100%;
	}
	
	/* 输入框组 */
	.input-group {
		position: relative;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		background: #f7fafc;
		border-radius: 24rpx;
		padding: 0 30rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;
	}
	
	.input-group:focus-within {
		background: #fff;
		border-color: #f5576c;
		box-shadow: 0 0 0 4rpx rgba(245, 87, 108, 0.1);
	}
	
	.input-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
		opacity: 0.6;
	}
	
	/* 眼睛图标 */
	.eye-icon {
		font-size: 40rpx;
		margin-left: 10rpx;
		opacity: 0.5;
		cursor: pointer;
		transition: opacity 0.3s ease;
		padding: 10rpx;
	}
	
	.eye-icon:active {
		opacity: 1;
	}
	
	.input {
		flex: 1;
		height: 90rpx;
		font-size: 32rpx;
		color: #2d3748;
		background: transparent;
		border: none;
	}
	
	.placeholder {
		color: #a0aec0;
	}
	
	/* 提示信息 */
	.tips {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		margin-bottom: 30rpx;
	}
	
	.tip-icon {
		font-size: 32rpx;
		margin-right: 12rpx;
	}
	
	.tip-text {
		font-size: 24rpx;
		color: #c53030;
		line-height: 1.5;
	}
	
	/* 按钮 */
	.button {
		width: 100%;
		height: 96rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		border: none;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	
	.button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.2);
		transition: left 0.5s ease;
	}
	
	.button:active::before {
		left: 100%;
	}
	
	.button.primary {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		box-shadow: 0 10rpx 30rpx rgba(245, 87, 108, 0.4);
	}
	
	.button.primary:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 20rpx rgba(245, 87, 108, 0.3);
	}
	
	.button.secondary {
		background: #f7fafc;
		border: 2rpx solid #e2e8f0;
	}
	
	.button.secondary:active {
		background: #edf2f7;
		transform: translateY(2rpx);
	}
	
	.button-text {
		font-size: 32rpx;
		font-weight: 600;
		position: relative;
		z-index: 1;
	}
	
	.button.primary .button-text {
		color: #fff;
	}
	
	.button.secondary .button-text {
		color: #f5576c;
	}
	
	.button[disabled] {
		opacity: 0.6;
		transform: none !important;
	}
	
	/* 分割线 */
	.divider {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
	}
	
	.divider-line {
		flex: 1;
		height: 2rpx;
		background: #e2e8f0;
	}
	
	.divider-text {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #a0aec0;
	}
</style>
